{% extends 'base.html' %}
{% block title %}
    <h2>任务日志</h2>

{% endblock %}
{% block content %}
    <table class="layui-hide" id="test" lay-filter="test"></table>

    <script>

        layui.use(['table', 'dropdown'], function () {
            var table = layui.table;
            var dropdown = layui.dropdown;
            // 单元格事件处理

            table.on('tool(test)', function (obj) {
                console.log(obj)
                if (obj.event == 'details') {

                    task_id = obj.data.task_id
                    console.log(task_id)
                    layer.open({
                        type: 2, // page 层类型
                        area: ['700px', '600px'],
                        title: 'Hello layer',
                        scrollbar: false,

                        maxmin: true, // 允许全屏最小化
                        content: '/go_result_page/' + task_id
                    });

                }
            })
            table.render({
                elem: "#test",
                url: '{% url 'ansible_run:get_task_list_api' %}',
                page: true, // 是否显示分页
                limits: [5, 10, 50, 100, 200],
                limit: 5,// 每页默认显示的数量
                skin: 'line',
                {#toolbar: true,#}
                cols: [[
                    {
                        field: 'job_name',
                        title: '任务名称',
                        maxWidth: 180,

                    },

                    {
                        field: 'job_type',
                        title: '任务类型',
                        maxWidth: 100,

                    },
                    {
                        field: 'created_at',
                        title: '创建时间',
                        sort: true,
                        maxWidth: 200,


                    },
                    {
                        field: 'task_id',
                        title: 'task_id'
                    },
                    {
                        title: "详情",
                        maxWidth: 80,
                        templet: ' <button type="button" lay-event="details" class="layui-btn layui-btn-xs">详情</button>',
                    }
                ]]
            })

        })

    </script>
{% endblock %}